// 面包屑导航组件
import React from 'react';
import { useBreadcrumbs, useNavigation } from '../../stores/routerStore';
import { BreadcrumbItem } from '../../types/router';

interface BreadcrumbProps {
  className?: string;
}

export const Breadcrumb: React.FC<BreadcrumbProps> = ({ className = '' }) => {
  const breadcrumbs = useBreadcrumbs();
  const { navigate } = useNavigation();

  const handleBreadcrumbClick = (item: BreadcrumbItem) => {
    if (item.path) {
      navigate(item.path);
    }
  };

  const getIconComponent = (iconName?: string) => {
    if (!iconName) return null;
    
    const iconMap: Record<string, string> = {
      'file-text': '📝',
      'bar-chart-3': '📊',
      'network': '🕸️',
      'settings': '⚙️',
      'folder': '📁',
      'home': '🏠',
    };
    return iconMap[iconName] || '📄';
  };

  if (breadcrumbs.length === 0) {
    return null;
  }

  return (
    <nav className={`flex items-center space-x-2 text-sm ${className}`}>
      {breadcrumbs.map((item, index) => {
        const isLast = index === breadcrumbs.length - 1;
        const isClickable = item.path && !isLast;

        return (
          <React.Fragment key={index}>
            <div className="flex items-center">
              {item.icon && (
                <span className="mr-1">
                  {getIconComponent(item.icon)}
                </span>
              )}
              
              {isClickable ? (
                <button
                  className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:underline"
                  onClick={() => handleBreadcrumbClick(item)}
                >
                  {item.label}
                </button>
              ) : (
                <span className={`
                  ${isLast 
                    ? 'text-gray-900 dark:text-white font-medium' 
                    : 'text-gray-600 dark:text-gray-400'
                  }
                `}>
                  {item.label}
                </span>
              )}
            </div>

            {!isLast && (
              <span className="text-gray-400 dark:text-gray-600">
                /
              </span>
            )}
          </React.Fragment>
        );
      })}
    </nav>
  );
};
